<template>
  <view class="color-block"
    :style="{
      backgroundColor: currentColor,
      width: sizes[currentSizeIndex] + 'px',
      height: sizes[currentSizeIndex] + 'px'
    }"
    @click="changeSizeAndColor"
  >
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 定义多种尺寸
      sizes: [100, 150, 200, 250],
      // 当前尺寸索引
      currentSizeIndex: 0,
      // 当前颜色
      currentColor: '#42b983'
    }
  },
  methods: {
    // 切换尺寸和颜色
    changeSizeAndColor() {
      // 循环切换尺寸索引
      this.currentSizeIndex = (this.currentSizeIndex + 1) % this.sizes.length;
      // 生成随机颜色
      this.currentColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    }
  }
}
</script>

<style >
.color-block {
  margin: 50px auto;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* 平滑过渡动画 */
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
</style>
